
import { useState } from 'react';
import { MessageSquare, Plus, Search, Filter, MessageCircle, AlertTriangle, CheckCircle, Clock } from 'lucide-react';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Badge } from '@/components/ui/badge';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';

export default function FeedbackManagement() {
  const [searchTerm, setSearchTerm] = useState('');
  const [statusFilter, setStatusFilter] = useState('all');
  const [feedbacks] = useState([
    {
      id: 1,
      title: '音频采集延迟问题',
      description: '在使用音频采集功能时，发现有明显的延迟现象，影响实时性。',
      user: '张三',
      email: 'zhangsan@example.com',
      type: 'bug',
      status: 'pending',
      priority: 'high',
      createdAt: '2023-11-01 10:30',
      updatedAt: '2023-11-01 10:30'
    },
    {
      id: 2,
      title: '希望增加更多滤波器选项',
      description: '当前的滤波器类型比较少，希望能增加更多的滤波器选项，如椭圆滤波器等。',
      user: '李四',
      email: 'lisi@example.com',
      type: 'feature',
      status: 'in-progress',
      priority: 'medium',
      createdAt: '2023-10-30 14:20',
      updatedAt: '2023-11-01 09:15'
    },
    {
      id: 3,
      title: '界面响应速度慢',
      description: '在特征提取模块中，界面响应比较慢，操作体验不佳。',
      user: '王五',
      email: 'wangwu@example.com',
      type: 'improvement',
      status: 'resolved',
      priority: 'low',
      createdAt: '2023-10-28 16:45',
      updatedAt: '2023-10-29 11:20'
    },
    {
      id: 4,
      title: '导出功能异常',
      description: '尝试导出音频文件时出现错误，无法正常下载。',
      user: '赵六',
      email: 'zhaoliu@example.com',
      type: 'bug',
      status: 'pending',
      priority: 'high',
      createdAt: '2023-11-01 11:45',
      updatedAt: '2023-11-01 11:45'
    }
  ]);

  const getTypeColor = (type: string) => {
    switch (type) {
      case 'bug': return 'bg-red-500/20 text-red-400';
      case 'feature': return 'bg-blue-500/20 text-blue-400';
      case 'improvement': return 'bg-green-500/20 text-green-400';
      default: return 'bg-gray-500/20 text-gray-400';
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'pending': return 'bg-yellow-500/20 text-yellow-400';
      case 'in-progress': return 'bg-blue-500/20 text-blue-400';
      case 'resolved': return 'bg-green-500/20 text-green-400';
      default: return 'bg-gray-500/20 text-gray-400';
    }
  };

  const getPriorityColor = (priority: string) => {
    switch (priority) {
      case 'high': return 'bg-red-500/20 text-red-400';
      case 'medium': return 'bg-yellow-500/20 text-yellow-400';
      case 'low': return 'bg-green-500/20 text-green-400';
      default: return 'bg-gray-500/20 text-gray-400';
    }
  };

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'pending': return Clock;
      case 'in-progress': return MessageCircle;
      case 'resolved': return CheckCircle;
      default: return AlertTriangle;
    }
  };

  const filteredFeedbacks = feedbacks.filter(feedback => {
    const matchesSearch = feedback.title.includes(searchTerm) || feedback.description.includes(searchTerm);
    const matchesStatus = statusFilter === 'all' || feedback.status === statusFilter;
    return matchesSearch && matchesStatus;
  });

  const getStatusCounts = () => {
    return {
      total: feedbacks.length,
      pending: feedbacks.filter(f => f.status === 'pending').length,
      inProgress: feedbacks.filter(f => f.status === 'in-progress').length,
      resolved: feedbacks.filter(f => f.status === 'resolved').length,
    };
  };

  const statusCounts = getStatusCounts();

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-2xl font-bold text-white">问题反馈</h2>
          <p className="text-gray-400">用户反馈收集与处理管理</p>
        </div>
        <Dialog>
          <DialogTrigger asChild>
            <Button className="btn-primary">
              <Plus className="w-4 h-4 mr-2" />
              新建反馈
            </Button>
          </DialogTrigger>
          <DialogContent className="glass-card max-w-2xl">
            <DialogHeader>
              <DialogTitle className="text-white">提交新反馈</DialogTitle>
            </DialogHeader>
            <div className="space-y-4 pt-4">
              <div>
                <label className="block text-sm font-medium text-gray-300 mb-2">反馈类型</label>
                <Select>
                  <SelectTrigger className="input-advanced">
                    <SelectValue placeholder="选择反馈类型" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="bug">Bug 报告</SelectItem>
                    <SelectItem value="feature">功能建议</SelectItem>
                    <SelectItem value="improvement">改进建议</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-300 mb-2">标题</label>
                <Input className="input-advanced" placeholder="请输入问题标题" />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-300 mb-2">详细描述</label>
                <Textarea 
                  className="input-advanced min-h-[120px]" 
                  placeholder="请详细描述问题或建议..." 
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-300 mb-2">优先级</label>
                <Select>
                  <SelectTrigger className="input-advanced">
                    <SelectValue placeholder="选择优先级" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="high">高</SelectItem>
                    <SelectItem value="medium">中</SelectItem>
                    <SelectItem value="low">低</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="flex space-x-2 pt-4">
                <Button className="btn-primary flex-1">提交反馈</Button>
                <Button variant="outline" className="flex-1">取消</Button>
              </div>
            </div>
          </DialogContent>
        </Dialog>
      </div>

      {/* Statistics */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
        <Card className="glass-card p-6">
          <div className="flex items-center justify-between">
            <div>
              <div className="text-2xl font-bold text-white">{statusCounts.total}</div>
              <div className="text-sm text-gray-400">总反馈数</div>
            </div>
            <MessageSquare className="w-8 h-8 text-blue-400" />
          </div>
        </Card>
        
        <Card className="glass-card p-6">
          <div className="flex items-center justify-between">
            <div>
              <div className="text-2xl font-bold text-yellow-400">{statusCounts.pending}</div>
              <div className="text-sm text-gray-400">待处理</div>
            </div>
            <Clock className="w-8 h-8 text-yellow-400" />
          </div>
        </Card>
        
        <Card className="glass-card p-6">
          <div className="flex items-center justify-between">
            <div>
              <div className="text-2xl font-bold text-blue-400">{statusCounts.inProgress}</div>
              <div className="text-sm text-gray-400">处理中</div>
            </div>
            <MessageCircle className="w-8 h-8 text-blue-400" />
          </div>
        </Card>
        
        <Card className="glass-card p-6">
          <div className="flex items-center justify-between">
            <div>
              <div className="text-2xl font-bold text-green-400">{statusCounts.resolved}</div>
              <div className="text-sm text-gray-400">已解决</div>
            </div>
            <CheckCircle className="w-8 h-8 text-green-400" />
          </div>
        </Card>
      </div>

      {/* Filters */}
      <Card className="glass-card p-6">
        <div className="flex flex-col md:flex-row gap-4">
          <div className="flex-1">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
              <Input
                className="input-advanced pl-10"
                placeholder="搜索反馈标题或内容..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </div>
          </div>
          <Select value={statusFilter} onValueChange={setStatusFilter}>
            <SelectTrigger className="input-advanced w-full md:w-40">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">所有状态</SelectItem>
              <SelectItem value="pending">待处理</SelectItem>
              <SelectItem value="in-progress">处理中</SelectItem>
              <SelectItem value="resolved">已解决</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </Card>

      {/* Feedback List */}
      <Card className="glass-card p-6">
        <Tabs defaultValue="list">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="list">列表视图</TabsTrigger>
            <TabsTrigger value="cards">卡片视图</TabsTrigger>
          </TabsList>
          
          <TabsContent value="list" className="mt-4">
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b border-gray-700">
                    <th className="text-left py-3 text-gray-400">标题</th>
                    <th className="text-left py-3 text-gray-400">类型</th>
                    <th className="text-left py-3 text-gray-400">状态</th>
                    <th className="text-left py-3 text-gray-400">优先级</th>
                    <th className="text-left py-3 text-gray-400">提交者</th>
                    <th className="text-left py-3 text-gray-400">创建时间</th>
                  </tr>
                </thead>
                <tbody>
                  {filteredFeedbacks.map((feedback) => {
                    const StatusIcon = getStatusIcon(feedback.status);
                    return (
                      <tr key={feedback.id} className="border-b border-gray-800 hover:bg-white/5 cursor-pointer">
                        <td className="py-3">
                          <div className="font-medium text-white">{feedback.title}</div>
                          <div className="text-gray-400 text-xs truncate max-w-xs">
                            {feedback.description}
                          </div>
                        </td>
                        <td className="py-3">
                          <Badge className={getTypeColor(feedback.type)}>
                            {feedback.type === 'bug' ? 'Bug' : 
                             feedback.type === 'feature' ? '功能' : '改进'}
                          </Badge>
                        </td>
                        <td className="py-3">
                          <div className="flex items-center">
                            <StatusIcon className="w-4 h-4 mr-2" />
                            <Badge className={getStatusColor(feedback.status)}>
                              {feedback.status === 'pending' ? '待处理' :
                               feedback.status === 'in-progress' ? '处理中' : '已解决'}
                            </Badge>
                          </div>
                        </td>
                        <td className="py-3">
                          <Badge className={getPriorityColor(feedback.priority)}>
                            {feedback.priority === 'high' ? '高' :
                             feedback.priority === 'medium' ? '中' : '低'}
                          </Badge>
                        </td>
                        <td className="py-3 text-gray-300">{feedback.user}</td>
                        <td className="py-3 text-gray-300">{feedback.createdAt}</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </TabsContent>
          
          <TabsContent value="cards" className="mt-4">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {filteredFeedbacks.map((feedback) => {
                const StatusIcon = getStatusIcon(feedback.status);
                return (
                  <Card key={feedback.id} className="glass-card p-4 hover:bg-white/5 cursor-pointer transition-colors">
                    <div className="flex items-start justify-between mb-3">
                      <div className="flex items-center space-x-2">
                        <StatusIcon className="w-4 h-4 text-gray-400" />
                        <Badge className={getTypeColor(feedback.type)}>
                          {feedback.type === 'bug' ? 'Bug' : 
                           feedback.type === 'feature' ? '功能' : '改进'}
                        </Badge>
                      </div>
                      <Badge className={getPriorityColor(feedback.priority)}>
                        {feedback.priority === 'high' ? '高' :
                         feedback.priority === 'medium' ? '中' : '低'}
                      </Badge>
                    </div>
                    
                    <h4 className="font-medium text-white mb-2">{feedback.title}</h4>
                    <p className="text-gray-400 text-sm mb-3 line-clamp-2">
                      {feedback.description}
                    </p>
                    
                    <div className="flex items-center justify-between">
                      <div className="text-xs text-gray-500">
                        by {feedback.user}
                      </div>
                      <Badge className={getStatusColor(feedback.status)}>
                        {feedback.status === 'pending' ? '待处理' :
                         feedback.status === 'in-progress' ? '处理中' : '已解决'}
                      </Badge>
                    </div>
                  </Card>
                );
              })}
            </div>
          </TabsContent>
        </Tabs>
      </Card>
    </div>
  );
}
